import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'
import Title from '../../component/header/header'
import { px2dp, lastTime } from '../../utils/util';
import ShopcarList from './components/shopcar_list';
import ShopBottom from './components/shopcar_bottom';
import server,{api} from '../../common/net/server';
export default class ShopcarJclq extends Component {
  static navigationOptions = ({ navigation })=> {
    return {
      header: <Title  goBack = {() => navigation.goBack()} text='下单' rightText= '添加赛事'
          />,
    }
  }
  constructor(props) {
    super(props)
    let {shopCar,playType} = props.navigation.getParam('shopCar');
    let mapNumberList = this.filterMapList(shopCar,this.computedNum);
    this.state = {
       shopCar: shopCar,
       playType: playType,
       userInfo: {},
       mapNumberList: mapNumberList
    }
    this.submit = this.submit.bind(this);
  }
  submit(sendData){
    let {shopCar} = this.state;
    let dg = this.filterMapList(shopCar,this.filterOddsList);
    console.log({dg});
    this.betOrder(sendData,dg)
  }
  betOrder(sendData,dg){
    let {playType} = this.state;
    let {navigation} = this.props;
    let defualtData = {
      bunch_type: "1_1",
      multiple: 1,
      play_type: playType,
      buy_number: JSON.stringify(dg)
    }
    let severData = Object.assign({},defualtData,sendData);

    server.post(api.jclq.betOrder,severData)
    .then(res => {
      console.log(res);
      navigation.navigate('Payment', {
        orderInfo: res.data,
      });
      
    })
  }


  filterMapList(shopCar,callBack){
    let ss = shopCar.map(item => {
      return callBack.call(this,item)
    })
    return ss
  }
  filterOddsList(item){
    let newsItem = JSON.parse(JSON.stringify(item));
    let oddsList = ['odds_1_all','odds_2_all','odds_3_all','odds_4_all'];
    let oddsType = {
      'odds_1_all': 1,
      'odds_2_all': 2,
      'odds_3_all': 3,
      'odds_4_all': 4,

    }
    let dd = oddsList.reduce((arr,oddsKey) => {
      let odds = newsItem[oddsKey];
      Object.keys(odds).forEach((key) =>{
        if(odds[key].chose){
          arr.push({
            codes:key,
            play_type: oddsType[oddsKey]
          })
        } 
      })
      return arr;
    },[])
    return {
      match_id: newsItem.match_id,
      play_type_datas: dd
    }
  }



  computedNum(item){
    let oddsList = ['odds_1_all','odds_2_all','odds_3_all','odds_4_all'];
    let dd = oddsList.reduce((init,oddsKey) => {
      let ffff = this.filterChose(item[oddsKey]);
      init += ffff
      return init;
    },0)
    return dd
    
  }
  filterChose(Arr){
    return Object.values(Arr).reduce((intNum,item)=>{
      if(item.chose){
        intNum++;
      }
      return intNum
    },0)
  }


  componentDidMount(){
    this.getBaseInfo()
  }
  getBaseInfo(){
    server.post(api.login.mybaseinfo)
    .then(res =>{
      // console.log(res);
      this.setState({
        userInfo:res.data
      })
      // console.log(this.state.cpList);
    })
  }
  
  render() {
    let {shopCar,userInfo, playType, mapNumberList} = this.state;
    return (
      <View style={[shopCarStyle.wrap,{flex:1}]}>
        <View style={[shopCarStyle.titleBox, shopCarStyle.paddingTheme]}>
          <Text style={shopCarStyle.titleText}>已选择{shopCar.length}场比赛 投注截止时间 </Text>
          <Text style={[shopCarStyle.titleText,shopCarStyle.redColor]}>{lastTime(shopCar[0].match_time_int,'mm-dd hh:mm')}</Text>
        </View>
        <View style={[shopCarStyle.paddingTheme,{flex:1}]}>
          <ShopcarList data={this.state.shopCar}></ShopcarList>
        </View>
        <ShopBottom userInfo={userInfo} playType={playType} mapNumberList={mapNumberList} submit = {this.submit}></ShopBottom>
      </View>
    )
  }
}

const shopCarStyle = StyleSheet.create({
  wrap: {
    // paddingHorizontal: px2dp(20),
    backgroundColor: '#f4f4f4',
    height: '100%'
  },
  paddingTheme: {
    paddingHorizontal: px2dp(20),
  },
  titleBox: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignContent: 'center',
    backgroundColor: '#FFF',
    height: px2dp(80),
    paddingBottom: px2dp(20),
  },
  titleText: {
    color: '#333',
    fontSize: px2dp(26),
    lineHeight: px2dp(80)
  },
  redColor: {
    color: '#ff473a'
  }
})
